<style scoped>
    /*    .add_bank_card_page {
        width: 800px;
        height: 30px;
        margin: 10px auto;
    }*/

    .add_bank_card_form {
        width: 625px;
        margin: 30px auto 30px;
    }

    .add_bank_card_next {
        width: 350px;
    }

    .text_blue {
        cursor: pointer;
        color: rgb(59, 166, 211);
    }
</style>
<template>
    <div>
        <nt-row class="title_main">
            <nt-col :span="12">提现<img src="../../images/default_img.jpg" width="20" height="20" /></nt-col>
            <nt-col :span="12" align="right"><span class="text_blue" @click="goBack"><i class="nt-icon-xbn-20 mR5"></i>返回</span></nt-col>
        </nt-row>
        <nt-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="add_bank_card_form">
            <nt-form-item label="可用余额：">
                <div class="fix">
                    <div class="fL">
                        <span class="f24">85915.05</span>
                        <span>美元</span>
                    </div>
                    <div class="fR">
                        <span>当前汇率:</span>
                        <span>6.6081</span>
                        <span>(5分钟前更新)</span>
                    </div>
                </div>
                <p class="lh14 col_cccccc">1数字美元=1美元</p>
            </nt-form-item>
            <nt-form-item label="选择银行卡：" prop="bank_card">
                <nt-select v-model="ruleForm.bank_card" placeholder="请选择" class="w370" @change="selectedBankAccountAction">
                    <nt-option v-for="item in bankCardList" :key="item.account_number" :label="item.bank_name+'   '+item.account_number" :value="item.account_number">
                    </nt-option>
                </nt-select>
            </nt-form-item>
            <nt-form-item label="提现金额：" prop="extract_money_amount">
                <nt-input v-model.number="ruleForm.extract_money_amount" placeholder="请输入提现金额" :maxlength="40" class="w370" @blur="endInputAction"
                />
                <p class="lh21 col_cccccc">手续费：0美元</p>
            </nt-form-item>
            <nt-form-item label="到账金额：" class="form-item-text">
                <p>
                    <span class="f24">￥0</span>
                    <span>人民币</span>
                </p>
                <p class="lh21 col_cccccc">注：人民币只接受中国境内银行账户提现。</p>
            </nt-form-item>
            <nt-form-item label="" class="form-item-text">
                <nt-button class="add_bank_card_next" type="success" :loading="loading" :disable="disable" @click="submitForm('ruleForm')">{{submit_text}}
                </nt-button>
            </nt-form-item>
        </nt-form>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                ruleForm: {
                    bank_card: '',
                    extract_money_amount: '',
                },
                rules: {
                    bank_card: [
                        { required: true, message: '请选择银行卡', trigger: 'change' }
                    ],
                    extract_money_amount: [
                        { required: true, message: '请输入提现金额', trigger: 'blur', type: 'number', message: '提现金额必须为数字值' },
                    ],
                },
                // bankCardList: [{ curTypeId: 'CNY', curType: '6225880158536541' }, { curTypeId: 'USD', curType: '6225880158536542' }, { curTypeId: 'EUR', curType: '6225880158536543' }, { curTypeId: 'JPY', curType: '6225880158536544' }],
                bankCardList: [],
                bankAccountDetail: Object,
                loading: false,
                disable: false,
                submit_text: '下一步',
            }
        },

        components: {

        },

        created: async function () {
            let accountId = this.ctx.store.get('account_id');
            let list = await this.ctx.models.settlement.getBankAccountList(accountId, this.ctx);
            if (list.statusCode == 200) {
                this.bankCardList = list.data;
            } else {
                this.$alert("银行账户列表获取失败，请稍后再试。", '提示', {
                    confirmButtonText: '确定',
                });
            }
        },

        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            goBack() {
                this.$router.go(-1);
            },
            //根据选中的银行账号，获取银行对象信息
            getBankAccountDetail: function (val) {
                console.log(this.bankCardList);
                for (let i = 0; i < this.bankCardList.length; i++) {
                    const element = this.bankCardList[i];
                    if (element.account_number == val) {
                        return element;
                    }
                }
            },
            //选择账号完成后执行的方法==这里需要获取银行信息的对象
            selectedBankAccountAction: function (val) {
                this.bankAccountDetail = this.getBankAccountDetail(val);
                console.log(this.bankAccountDetail);
            },
            //提现金额输入完成调用方法，获取手续费
            endInputAction(val) {
                console.log(val.target.value);
                let extractMoney = val.target.value;
                // if (parseInt(extractMoney) > 0) {
                //     let accountId = this.ctx.store.get('account_id');
                // let bankAccountList = await this.ctx.models.settlement.getExtractPreview({
                //    'accountId':accountId,
                //    'withdraw' 
                // }, this.ctx);
                // // console.log('银行账户列表' + bankAccountList.data);
                // }

            },
        }
    }
</script>